import React from 'react';
import ReactDOM from 'react-dom/client';
import { marked } from 'marked';
import hljs from 'highlight.js';
import './vite-env.d.ts';

// 动态导入组件
const importComponent = async (componentName: string) => {
  try {
    const module = await import(`./components/${componentName}/${componentName}.tsx`);
    return module.default;
  } catch (error) {
    console.error(`Failed to load component ${componentName}:`, error);
    return null;
  }
};

// 自定义 CodeExample 组件
interface CodeExampleProps {
  code: string;
  language: string;
  componentName: string;
}

// 自定义解析器
const createCustomMarkedRenderer = (componentName: string) => {
  const renderer = new marked.Renderer();
  
  // 自定义标题解析，添加锚点
  renderer.heading = (text, level, raw) => {
    const id = text.toLowerCase().replace(/[$\W]/g, '-');
    return `<h${level} id="doc-${id}"><a href="#doc-${id}" class="anchor-link"></a>${text}</h2>`;
  };
  
  // 自定义代码块解析，添加预览区域
  renderer.code = (code, language) => {
    // 检查是否是 React 示例代码
    if (language === 'tsx' || language === 'jsx') {
      // 生成唯一的容器ID
      const containerId = `example-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
      
      // 返回包含预览和代码的 HTML
      return `
        <div class="code-example">
          <div class="code-preview">
            <div id="${containerId}" class="example-container"></div>
          </div>
          <pre><code class="language-${language}">${code}</code></pre>
        </div>
      `;
    }
    
    // 其他语言的代码块
    return `<pre><code class="language-${language}">${code}</code></pre>`;
  };
  
  return renderer;
};

// 配置 marked 解析器
const configureMarked = (componentName: string) => {
  marked.setOptions({
    renderer: createCustomMarkedRenderer(componentName),
    highlight: (code, lang) => {
      try {
        return hljs.highlight(code, { language: lang }).value;
      } catch (e) {
        return hljs.highlightAuto(code).value;
      }
    },
    langPrefix: 'language-',
    breaks: true,
    gfm: true
  });
};

// 增强的 Markdown 解析器
function parseMarkdown(markdown: string | React.ReactElement, componentName: string): React.ReactElement {
  // 如果传入的是字符串，使用 marked 解析
  if (typeof markdown === 'string') {
    // 配置 marked 解析器
    configureMarked(componentName);
    
    // 使用 marked 解析 Markdown 并转换为 HTML
    const htmlContent = marked.parse(markdown);
    
    // 将 HTML 字符串转换为 React 元素
    return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
  }
  
  // 如果传入的是 React 元素，直接返回
  return markdown;
}

// 提取组件属性说明（基于类型定义）
const extractComponentPropsFromType = async (componentName: string) => {
  try {
    // 动态导入组件类型定义
    let typeModule;
    
    // 根据组件名称动态导入对应的类型文件
    switch (componentName) {
      case 'Button':
        typeModule = await import(/* @vite-ignore */ `./components/${componentName}/${componentName}.types.ts`.toLowerCase());
        break;
      // 其他组件类型导入
      default:
        typeModule = {};
        break;
    }
    
    // 实际实现中应使用 ts-morph 或其他工具从类型文件中提取信息
    // 这里返回硬编码数据作为示例
    switch (componentName) {
      case 'Button':
        return [
          {
            prop: 'type',
            type: 'string',
            default: 'default',
            description: '按钮类型，可选值: default, primary, secondary, danger'
          },
          {
            prop: 'size',
            type: 'string',
            default: 'medium',
            description: '按钮尺寸，可选值: small, medium, large'
          },
          {
            prop: 'disabled',
            type: 'boolean',
            default: 'false',
            description: '是否禁用'
          },
          {
            prop: 'loading',
            type: 'boolean',
            default: '-',
            description: '是否显示加载状态'
          },
          {
            prop: 'onClick',
            type: 'function',
            default: '-',
            description: '点击事件处理函数'
          }
        ];
      // 其他组件
      default:
        return [];
    }
  } catch (error) {
    console.error(`Failed to extract props for ${componentName}:`, error);
    return [];
  }
};

// 缓存已提取的属性
const componentPropsCache: { [key: string]: any[] } = {};

// 获取组件属性说明
const getComponentProps = async (componentName: string) => {
  // 如果缓存中已有直接返回
  if (componentPropsCache[componentName]) {
    return componentPropsCache[componentName];
  }
  
  // 否则从类型定义中提取
  const props = await extractComponentPropsFromType(componentName);
  componentPropsCache[componentName] = props;
  return props;
};

const ComponentDocs = () => {
  // 组件目录数据
  const componentNavItems = [
    { id: 'button', title: '按钮组件' }
    // 其他组件链接
  ];
  
  // 当前选中的组件
  const [activeComponent, setActiveComponent] = React.useState('Button');
  
  // 根据组件名获取文档
  const getComponentDocs = (componentName: string) => {
    switch (componentName) {
      case 'Button':
        // 导入 Button 文档组件
        const ButtonDoc = React.lazy(() => import(`./components/Button/ButtonDoc`));
        return <React.Suspense fallback="Loading...">{ButtonDoc && <ButtonDoc />}</React.Suspense>;
      // 其他组件文档
      default:
        return '';
    }
  };
  
  // 获取组件属性说明
  const [componentProps, setComponentProps] = React.useState<any[]>([]);
  
  // 加载组件属性
  React.useEffect(() => {
    const loadProps = async () => {
      const props = await getComponentProps(activeComponent);
      setComponentProps(props);
    };
    
    loadProps();
  }, [activeComponent]);
  
  return (
    <div className="component-docs-container">
      <h1>avc-ui 组件库文档</h1>
      
      <div className="docs-layout">
        {/* 左侧目录 */}
        <nav className="docs-nav">
          <h2>组件目录</h2>
          <ul>
            {componentNavItems.map((item) => (
              <li key={item.id}>
                <a 
                  href={`#${item.id}`} 
                  onClick={() => setActiveComponent(item.title.replace('组件', ''))}
                  className={activeComponent === item.title.replace('组件', '') ? 'active' : ''}
                >
                  {item.title}
                </a>
              </li>
            ))}
          </ul>
        </nav>
        
        {/* 右侧内容 */}
        <main className="docs-content">
          <section id="button">
            <h2>{activeComponent} 组件</h2>
            {parseMarkdown(getComponentDocs(activeComponent), activeComponent)}
            
            {/* 参数说明放在文末 */}
            <div className="component-props-section" style={{ marginTop: '40px' }}>
              <h3>组件参数说明</h3>
              <div className="props-table-container">
                {componentProps.length > 0 && (
                  <table className="component-props-table">
                    <thead>
                      <tr>
                        <th>属性</th>
                        <th>类型</th>
                        <th>默认值</th>
                        <th>说明</th>
                      </tr>
                    </thead>
                    <tbody>
                      {componentProps.map((prop, index) => (
                        <tr key={index}>
                          <td>{prop.prop}</td>
                          <td><span className="prop-type">{prop.type}</span></td>
                          <td><span className="prop-default">{prop.default}</span></td>
                          <td>{prop.description}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                )}
              </div>
            </div>
          </section>
        </main>
      </div>
    </div>
  );
};

// 创建根元素并渲染应用
const root = ReactDOM.createRoot(document.getElementById('root')!);

// 渲染文档
const renderComponentDocs = () => {
  root.render(
    <React.StrictMode>
      <ComponentDocs />
    </React.StrictMode>,
  );
};

// 初始渲染
renderComponentDocs();

// 热更新处理
if (import.meta.hot) {
  import.meta.hot.on('vite:beforeUpdate', () => {
    // 在热更新前清理资源
    // 这里可以添加任何需要在重新渲染前执行的清理逻辑
  });

  import.meta.hot.on('vite:afterUpdate', () => {
    // 在热更新后重新渲染组件
    renderComponentDocs();
  });
}

export { ComponentDocs };
